<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>节流防抖</title>
</head>
<div>
    <p>在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。</p>
    <label> 函数防抖: <input id="debounce" type="text" value="" /> </label>
</div>


<br /> <hr /> <br /> 

<div>
    <p>规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。</p>
    <label> 函数节流: <input id="throttle" type="text" value="" /> </label>
</div>


<body>
    <script type="text/javascript">
    //模拟一段ajax请求
    function ajax(content) {
        console.log('ajax request ' + content)
    }

    function debounce(fun, delay) {
        return function(args) {
            let that = this
            let _args = args
            clearTimeout(fun.id)
            fun.id = setTimeout(function() {
                fun.call(that, _args)
            }, delay)
        }
    }

    let inputb = document.getElementById('debounce')

    let debounceAjax = debounce(ajax, 500)

    inputb.addEventListener('keyup', function(e) {
        debounceAjax(e.target.value)
    })


    function throttle(fun, delay) {
        let last, deferTimer
        console.log('=======',last, deferTimer)
        return function(args) {
            let that = this
            let _args = arguments
            let now = +new Date()
            if (last && now < last + delay) {
                clearTimeout(deferTimer)
                deferTimer = setTimeout(function() {
                    last = now
                    fun.apply(that, _args)
                }, delay)
            } else {
                last = now
                fun.apply(that, _args)
            }
        }
    }

    let throttleAjax = throttle(ajax, 1000)

    let inputc = document.getElementById('throttle')
    inputc.addEventListener('keyup', function(e) {
        throttleAjax(e.target.value)
    })
    </script>
</body>

</html>
